<script setup lang="ts">
import type { EChartsOption } from 'echarts' // 配置项的类型
import useEchart from './hooks/useEchart'

// ts类型声明props 和 默认值写法 返回值可以用props接收
const props = withDefaults(
  defineProps<{
    options: EChartsOption
    width?: string
    height?: string
  }>(),
  { width: '100%', height: '360px' }
)

// 实例echarts
const echartDivRef = ref<HTMLElement>()
// 生命周期 挂载完毕
onMounted(() => {
  const { setOptions } = useEchart(echartDivRef.value!) // 非空断言
  // 如果配置项发生了改变就再次执行这个方法
  watchEffect(() => {
    setOptions(props.options)
  })
})
</script>

<template>
  <div class="base-echarts">
    <div ref="echartDivRef" class="echart-div"></div>
  </div>
</template>

<style scoped lang="less">
.echart-div {
  // v-bind 绑定script里面的属性给css。 可以直接绑定props里面的属性
  width: v-bind(width);
  height: v-bind(height);
}
</style>
